<template>
  <div class="box">
    <div class="Header">练习</div>
    <section class="question-classify">
      <router-link to="/point">
        <div class="com">
          <div>
            <img src="../../public/未标题-1.png" alt />
          </div>
          <p>考点专练</p>
        </div>
      </router-link>
      <router-link to="/paper-package">
        <div class="com">
          <div>
            <img src="../../public/未标题-2.png" alt />
          </div>
          <p>套卷练习</p>
        </div>
      </router-link>
      <router-link to="/Exam">
        <div class="com">
          <div>
            <img src="../../public/未标题-3.png" alt />
          </div>
          <p>仿真模考</p>
        </div>
      </router-link>
      <router-link to>
        <div class="com">
          <div>
            <img src="../../public/未标题-4.png" alt />
          </div>
          <p>错题练习</p>
        </div>
      </router-link>
      <router-link to>
        <div class="com">
          <div>
            <img src="../../public/未标题-5.png" alt />
          </div>
          <p>测评记录</p>
        </div>
      </router-link>
      <router-link to>
        <div class="com">
          <div>
            <img src="../../public/未标题-6.png" alt />
          </div>
          <p>习题收藏</p>
        </div>
      </router-link>
    </section>
    <div class="list">
      <h1>近期考试</h1>
      <div class="list-txt">
        <span class="s1">默认排序</span>
        <span class="s2">时间</span>
      </div>
      <div class="list-foot">
        <img src="../../public/未标题-0.png" alt />
        <div>暂无模考安排,敬请期待</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>
<style>
.box {
  background: #f0f2f5;
  width: 100%;
  height: 110%;
  font-size: 12px;
}
.Header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #fff;
  text-align: center;
  color: #5e5959;
  font-size: 18px;
}
.question-classify {
  width: 95%;
  height: 222px;

  display: flex;
  flex-wrap: wrap;

  background: #fff;
  border-radius: 1.33333vw;

  margin: 2.66667vw;

  padding: 1.33333vw 0;
}

.com > div {
  width: 10.66667vw;
  height: 10.66667vw;
  line-height: 10.66667vw;
  text-align: center;
  border-radius: 5.33333vw;
  box-shadow: 0 0 3.2vw 0 rgba(10, 0, 24, 0.07);
  margin: 0 24px;
  margin-top: 10px;
}
.com p {
  font-size: 1px;
  color: #595959;
  text-align: center;
  margin-top: 20px;
}
.com img {
  width: 4.53333vw;
}
.list {
  background-color: #fff;
  padding: 3.73333vw 4vw;
  color: #8c8c8c;
  height: 240px;
}
.list h1 {
  font-size: 4vw;
  margin-bottom: 3.86667vw;
}
.list-txt {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.s1 {
  color: #eb6100;
}
.list-foot {
  text-align: center;
}
.list-foot > div {
  color: #8c8c8c;
}
</style>
